<template>
  <div class="app-container">
    <el-form
    class="searchForm" :inline="true" size="mini"
      ref="searchForm"
      :model="searchForm" label-width="80px"
    >
      <el-form-item label="设备分类">
        <el-select disabled
          v-model="searchForm.equipClassifys"
          placeholder="请选择设备分类"
        >
          <el-option
            v-for="item in enums.EQUIP_CLASSIFY"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="fetchData"
          >搜索</el-button
        >
        <!-- <el-button
          type="default"
          size="mini"
          icon="el-icon-refresh"
          @click="resetSearch"
          >重置</el-button
        > -->
      </el-form-item>
    </el-form>
    <div class="searchs-content">
      <span>请勾选需要推送微信通知的告警项目</span>
      <el-button
        type="primary"
        size="mini"
        @click="isSaveAlarm"
        :loading="btnLoading"
        >保存</el-button
      >
    </div>
    <Table
      :tableHeader="tableHeader"
      :tableData="tableData"
      :tableLoading="listLoading"
      :selectData="selectData"
      @handleSelect="handleSelect"
    >
    </Table>
  </div>
</template>

<script>
import { userSemaphoreSub, semaphore } from "@/api/manage";
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import { handleConfirm } from "@/utils/messageBox";
import { mapState ,mapGetters} from "vuex";
import { removeNullUndefined } from "@/utils/index.js";

export default {
  components: { Table, Dialog },
  data() {
    return {
      listLoading: false,
      total: 0,
      searchForm: {
        equipClassifys: "",
      },

      tableHeader: [
        {
          type: "selection",
          width: "55",
          label: "多选",
          fixed: "left",
        },
        {
          type: "index",
          label: "序号",
          width: "60",
        },
        {
          label: "告警名称",
          prop: "name",
        },
        {
          label: "告警code",
          prop: "code",
        },
        {
          label: "设备分类",
          prop: "equipClassify",
          formatter: (item) => {
            return item.equipClassify
              ? this.enums.EQUIP_CLASSIFY.find(
                  (pp) => pp.code == item.equipClassify
                ).label
              : "";
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
      ],
      tableData: [],
      selectData: [], //选中data
      btnLoading: false, //按钮loading
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      enums: (state) => state.enums.enums,
    }),
    ...mapGetters(["equipTypeCode"]),
  },

   watch:{
    equipTypeCode:{
        handler(val){
            this.searchForm.equipClassifys = val;
        },
        immediate:true,
    },
   },
  created() {
    this.fetchData();
  },
  
  methods: {
    fetchData() {
      this.listLoading = true;
      this.tableData = [];
      this.total = 0;
      semaphore("/alarm/list", "get", {
        ...removeNullUndefined(this.searchForm),
      })
        .then((res) => {
          this.tableData = res.data;
          this.total = +res.total;
          this.selectData = [];

          if (this.tableData.length > 0) {
            this.getUserWarn();
          }
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    resetSearch() {
      this.searchForm = {
        equipClassifys: "",
      };
    },
    // 查询用户订阅消息
    getUserWarn() {
      userSemaphoreSub(`/all`, "post").then((res) => {
        this.selectData = res.data;
      });
    },
    handleSelect(e) {
      this.selectData = e;
      this.selectData.forEach((item) => {
        item.semaphoreCode = item.code;
        item.semaphoreName = item.name;
        item.semaphoreType = item.type;
      });
    },

    isSaveAlarm() {
      let msg = this.selectData.length == 0 ? '取消推送全部告警项目，确定继续？':'微信推送已勾选的告警项目，确定继续？';
      handleConfirm(msg, "warning", "提示")
        .then((res) => {
          this.saveAlarm();
        })
        .catch((err) => {});
    },
    saveAlarm() {
      let paramList = this.selectData.map((item) => {
        return {
          createBy: item.createBy,
          createTime: item.createTime,
          equipClassify: item.equipClassify,
          semaphoreCode: item.semaphoreCode,
          semaphoreName: item.semaphoreName,
          semaphoreType: item.semaphoreType,
        };
      });
      this.btnLoading = true;
      userSemaphoreSub(`/batch/save`, "post", paramList, 1)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
          }
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.searchs-content {
  @include flexLayout(center, space-between);
}
.searchForm {
    .el-form-item {
        margin-bottom: 8px;
    }
}
::v-deep .el-input.is-disabled .el-input__inner{
  color: #333;
}
</style>
